<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 15:55:55
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:09
-->
<template>
  <div class="apply">
    <div class="wrapper">
      <div class="title">{{projectDetails.name}}</div>
      <div class="price"><strong>项目费用：</strong>{{projectDetails.projectMoney}}元</div>
      <div class="time"><strong>起止时间：</strong>{{projectDetails.beginTime | fmtDate}}~{{projectDetails.endTime | fmtDate}}</div>
      <div class="introduce"><strong>项目介绍： </strong>{{projectDetails.introduce}}</div>
      <div class="steps">
        <el-steps :active="1" align-center>
          <el-step title="申请报名" description="用户选择自己喜欢的项目进行报名"></el-step>
          <el-step title="管理员确认" description="管理员确认用户报名，为用户开放账号"></el-step>
          <el-step title="用户付款" description="用户登录后可以进行确认，完成付款"></el-step>
          <el-step title="报名完成" description="报名接受后等待管理员线下通知"></el-step>
        </el-steps>
      </div>
      <!-- 表单开始 -->
      <div class="from">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone">
            <el-input v-model="ruleForm.telephone"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="ruleForm.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
             <el-form-item label="出生日期">
              <el-date-picker v-model="ruleForm.birth" type="date" placeholder="选择日期"></el-date-picker>
             </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button type="primary" plain @click="submitForm()">立即报名</el-button>
          <div><el-link @click="applyQuery()" type="primary">已报名？查看报名进度 >></el-link></div>
        </div>
      <!-- 表单结束 -->

      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { get, post } from '../utils/request'
import moment from 'moment'
export default({
  data(){
    return{
      id:this.$route.query.id,
      projectDetails:{},
      ruleForm: {
          name: '',
          telephone: '',
          gender: '',
          birth: '',
          address: '',
          projectId: this.$route.query.id,
        },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        telephone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    findProjectDetails(){
      get('/index/project/findById?id='+this.id).then(res => {
        if(res.status==200){
          this.projectDetails=res.data
        }else{
          this.$message({
            type: 'error',
            message: res.status
          })
        }
      })
    },
    submitForm(formName) {
      this.ruleForm.birth=moment(this.ruleForm.birth).format('x')
      post('/index/apply/saveOrUpdate',this.ruleForm).then(res => {
        if(res.status==200){
          this.$message({
            type: 'success',
            message: 'res.message'
          })
        }else{
          this.$message({
            type: 'error',
            message: 'res.message'
          })
        }
      })
    },
    applyQuery(){
      this.$router.push({path:'applyQuery'})
    }
  },
  created(){
    this.findProjectDetails()
  }
})
</script>
<style lang="scss" scoped>
.apply{
  .wrapper{
    width:980px;
    line-height:2em;
    .title{
      font-size: 20px;
      line-height: 3em;
      text-align: center;
      color: #333;
      font-weight: 700;
    }
    .steps{
      padding: 2em 0px;
    }
    .from{
      width: 500px;
      margin: 0 auto;
      padding: 2em;
    }
    .btn{
      text-align: center;
    }
  }
}
</style>
